---
title: Manual Setup
description:
  This guide walks you through the same steps Triplex takes when bootstrapping
  an existing project.
---

This guide walks you through the same steps Triplex takes when bootstrapping an
existing project.

## Install dependencies

Install `react`, `@types/react`, `three`, `@types/three`, and
`@react-three/fiber` in your project.

```
npm install react @types/react three @types/three @react-three/fiber
```

Alternatively you can use your package manager of choice such as `pnpm`, `yarn`,
or `bun`.

## Configure TypeScript

Open or create a `tsconfig.json` and add the following:

```json
{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": ".",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "incremental": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "es2022"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "types": ["@react-three/fiber"]
  },
  "include": ["."],
  "exclude": ["node_modules"]
}
```

## Configure Triplex

Create a config file and populate it.

```sh
touch .triplex/config.json
```

```json
{
  "components": ["../src/components/**/*.tsx"],
  "files": ["../src/**/*.tsx"]
}
```

## Add an example

Create an example file `src/scene.tsx` and add the following:

```tsx
export default function Scene() {
  return (
    <mesh>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="red" />
    </mesh>
  );
}
```

After set up is complete:

- Run the Triplex executable to start and open the editor
- Edit the component in `src/scene.tsx` and see it updated in the editor
- Edit the component in the editor and see it updated in your code

## Next steps

Once you have set up your project for Triplex, these topics will help you get up
to speed:

- [Learn the User Interface](/docs/get-started/user-interface) - A quick
  orientation around the editor
- [Project Settings](/docs/get-started/settings) - Learn how to configure the
  editor to your needs
- [Declaring Props](/docs/get-started/declaring-props) - Learn how declaring
  props on your components will appear in the editor
